<template>
  <view class="page">
    <view class="bg-white">
      <SimpleTabs :list="tabList" :current="0" @change="changeTab" />
    </view>
    <view class="main">
      <Card class="margin-bottom-sm" v-for="item in 4" :key="item">
        <u-text size="24rpx" color="#666" text="时间段：08:00~09:00"></u-text>
        <CollapseBox class="margin-top-sm" title="托管班：一年级（A）班" value="5人">
          <view class="flex align-center gap-sm margin-top-sm" v-for="item in 5" :key="item">
            <u-avatar :src="`https://picsum.photos/200/300?random=${item}`" size="60rpx"></u-avatar>
            <u-text text="张三" size="28rpx" color="#333"></u-text>
          </view>
        </CollapseBox>
      </Card>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import Card from '@/components/Card/index.vue';
import CollapseBox from '@/components/CollapseBox/index.vue';
import SimpleTabs from '@/components/SimpleTabs/index.vue';
const tabList = ref([
  { name: '上传作业' },
  { name: '上传错题' },
  { name: '生成日报' },
]);

const changeTab = (index) => {
  console.log(index);
};
</script>